<template>
  <div class="login">
    <canvas class="cash" id="canv"></canvas>
    <div class="login_header">
      <div class="login_header_center">
        <div class="login_header_title">后台管理系统</div>
        <div class="login_header_img"></div>
      </div>
      <div class="login_header_bottom"></div>
    </div>

    <!--  -->
    <div class="login_content">
      <div class="login_content_left login_animation"></div>
      <div class="login_content_right">
        <el-button @click="chang">跳</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import "@/assets/js/jquery.min.js";
// import "@/assets/js/Particleground.js";
import { stars_nest } from "../assets/js/particleground2";
export default {
  name: "login",
  mounted() {
    //   $(".login").particleground({
    //     dotColor: "#E8DFE8",
    //     lineColor: "#133b88",
    //   });
    stars_nest();
  },

  methods: {
    chang() {
      this.$router.push("mian");
    },
  },
};
</script>

<style scoped lang="scss">
.cash {
  position: fixed;
  top: 180px;
  width: 100%;
}

.login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;

  .login_header {
    border: 1px solid #000;
    width: 100%;
    height: 1.5rem;

    .login_header_center {
      border: 1px solid #000;
      width: 50%;
      height: 1.2rem;
      position: relative;
      margin: 0 auto;

      .login_header_title {
        text-align: center;
        color: #ffffff;
        font-size: 0.4rem;
        text-shadow: 0 0 0.3rem #00d8ff;
        line-height: 1.05rem;
      }

      .login_header_img {
        background: url("../assets/img/head.gif") no-repeat center center;
        background-size: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0.8rem;
      }
    }
  }

  .login_content {
    border: 1px solid #000;
    width: 12rem;
    height: 7rem;
    margin: 1rem auto 0 auto;
    .login_content_left {
      width: 6.2rem;
      height: 5.8rem;
      background: url("../assets/img/d.png") no-repeat;
      background-size: 100% 100%;
      padding: 0.4rem 0;
      box-sizing: border-box;
      margin-right: 2%;
      float: left;
    }

    .login_content_right {
      border: 1px solid #000;
      width: 5.4rem;
      height: 5.8rem;
      background-size: 100% 100%;
      float: right;
      position: relative;
    }
  }
}
</style>